<template>
  <a-modal v-model="visible" :title="title" :confirmLoading="submitLoading" width="600px" ok-text="确认" cancel-text="取消"
    @ok="addFormSubmit">
    <a-form :form="events_form" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
      <div v-if="type == 1">
        <a-form-item label="企业开户">
          <a-select @change="enterpriseChange" showSearch v-decorator="['enterpriseId',{ rules: [{ required: true, message: '请选择企业' }] }]" placeholder="请选择企业">
            <a-select-option v-for="item in enterpriseData" :key="item.key">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="园区选择">
          <a-select @change="companyChange" v-decorator="['parkId',{ rules: [{ required: true, message: '请选择园区' }] }]" placeholder="请选择园区">
            <a-select-option v-for="item in companyList" :key="item.parkId">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="园区账号选择">
          <a-select v-decorator="['parentAccountNo',{ rules: [{ required: true, message: '请选择园区账号' }] }]" placeholder="请选择园区账号">
            <a-select-option v-for="item in companyAccountList" :key="item.accountNo">
              {{ item.accountNo }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <div v-else>
        <a-form-item label="园区选择">
          <a-select @change="companyChange" v-decorator="['parkId',{ rules: [{ required: true, message: '请选择园区' }] }]" placeholder="请选择园区">
            <a-select-option v-for="item in companyList" :key="item.parkId">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="密钥">
          <a-input placeholder="请输入密钥" v-decorator="['secretKey',{ rules: [{ required: true, message: '请输入密钥' }] }]"></a-input>
        </a-form-item>
        <a-form-item label="结算账户">
          <a-input placeholder="请输入结算账户" v-decorator="['settlementAccount',{ rules: [{ required: true, message: '请输入结算账户' }] }]"></a-input>
        </a-form-item>
        <a-form-item label="用户编号">
          <a-input placeholder="请输入用户编号" v-decorator="['userNo',{ rules: [{ required: true, message: '请输入用户编号' }] }]"></a-input>
        </a-form-item>
        <a-form-item label="公钥">
          <a-input placeholder="请输入公钥" v-decorator="['publicKey',{ rules: [{ required: true, message: '请输入公钥' }] }]"></a-input>
        </a-form-item>
        <a-form-item label="私钥">
          <a-input placeholder="请输入私钥" v-decorator="['privateKey',{ rules: [{ required: true, message: '请输入私钥' }] }]"></a-input>
        </a-form-item>
      </div>
    </a-form>
  </a-modal>
</template>

<script>
import store from '@/store'
import {
  addEnterpriseBankAccount,
  addParkBankAccount,
  selectAccountList
} from "@/api/human/enterprise"
import {
  sysListBaseInfo
} from '@/api/manage/base'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'AddInfo',
  data() {
    return {
      title: "",
      type: "",
      visible: false,
      submitLoading: false,
      
      enterpriseId: "", // 企业id
      enterpriseData: [], // 客户列表
      companyList: [], // 园区
      companyAccountList: [], // 园区账号
    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    });
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    // 打开编辑弹窗 
    async add(type) {
      this.visible = true;
      this.type = type;
      this.$nextTick(() => {
        this.events_form.resetFields();
      })
      if (type == '1') {
        this.title = '企业开户';
        this.getEnterpriseData();
        this.getSysListBaseInfo();
      } else {
        this.title = '园区开户';
        this.getSysListBaseInfo();
      }
    },
    // 获取客户员工
    async getEnterpriseData() {
      const data = await store.dispatch('department/getAllEnterprise');
      data && data.forEach(v=>{
        v.key = v.name + ',' + v.enterpriseId;
      })
      this.enterpriseData = data;
    },
    // 选择客户
    enterpriseChange(value) {
      let enterpriseId = value.match(/,(\S*)/)[1];
    },
    // 选择园区
    async companyChange(value) {
      const { code,data } = await selectAccountList({parkId: value})
      if (code == 1) {
        this.companyAccountList = data;
      }
    },
    // 获取所有平台基础信息
    async getSysListBaseInfo() {
      const {
        code,
        data
      } = await sysListBaseInfo();
      if (code == "1") {
        this.companyList = data;
      }
    },
    // 提交
    async addFormSubmit() {
      this.events_form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          let params = {};
          if (this.type == 1) {
            // 企业开户
            values.enterpriseId = values.enterpriseId.match(/,(\S*)/)[1];
            values.payChannel = 1;
          } else {
            // 园区开户
            values.parkName = this.companyList.filter(item => item.parkId == values.parkId)[0].name
          }
          params = values;
          this.submitLoading = true;
          const { code } = this.type == 1 ? await addEnterpriseBankAccount(params) : await addParkBankAccount(params);
          this.submitLoading = false;
          if (code === '1') {
            this.visible = false;
            this.$message.success('操作成功');
            this.$emit('on-ok');
          }
        }
      });
    }
  }
}
</script>
